<template>
  <fieldset>
    <legend>高级侦听器</legend>
    <button @click="handleStop">点击停止侦听</button>
  </fieldset>
</template>
<script setup>
import { ref, watchEffect } from "vue";
let msg = ref("窗外");
let msg2 = ref("春天的故事");
setTimeout(() => {
  msg.value = "九九女儿红";
}, 2000);
// setTimeout(() => {
//   msg2.value = "涛声依旧";
// }, 3000);
// let stop = watchEffect(() => {
//   console.log("msg变化", msg.value);
//   console.log("msg2变化", msg2.value);
// });
let handleStop = () => {
  stop();
  stop2();
};
let stop2 = watchEffect((onInvalidate) => {
  console.log("msg2变化", msg2.value);
  onInvalidate(() => {
    console.log("侦听器即将重新执行");
  });
});
setTimeout(() => {
  msg2.value = "水手";
}, 2000);
</script>
<style scoped></style>
